<template>
  <v-container class="container-bg">
    <div class="qrcode-box ">
      <div class="text-center text-[16px] mb-4 px-4 bold">{{
        $vuetify.lang.t("$vuetify.sponsoredLinksTips1") }}</div>
      <div class="text-center text-[16px] mb-4 px-4 bold">{{
        $vuetify.lang.t("$vuetify.sponsoredLinksTips2") }}</div>
      <div class="text-center text-[16px] mb-4 px-4 bold">{{
        $vuetify.lang.t("$vuetify.sponsoredLinksTips3") }}</div>
      <div class="box-bg mt-[0px]" style="width: 100%;">
        <div class="text-center text-subtitle-1 px-8 mt-2">{{ $vuetify.lang.t("$vuetify.starUserDesc") }}</div>
        <div class="text-center text-subtitle-1 px-8 mt-0">{{ $vuetify.lang.t("$vuetify.starUserDesc1") }}</div>
        <v-simple-table style="background: transparent;">
          <template v-slot:default>
            <thead>
              <tr>
                <th style="padding: 0;" class="white--text text-center">{{ $vuetify.lang.t("$vuetify.level") }}</th>
                <th style="padding: 0;" class="white--text text-center">{{ $vuetify.lang.t("$vuetify.teamPerformance") }}</th>
                <th style="padding: 0;" class="white--text text-center">{{ $vuetify.lang.t("$vuetify.transactionFlow") }}</th>
                <th style="padding: 0;" class="white--text text-center">{{ $vuetify.lang.t("$vuetify.directReferral") }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) of tableData" :key="i">
                <td v-for="(_item, _i) of getCurrentPage.listHeader" class="text-center grey--text" :key="_i">
                  {{ _item.handle(item[_item.value]) }}
                </td>
              </tr>
            </tbody>
          </template>
        </v-simple-table>
      </div>

      <!-- <div class="text-center text-subtitle-1 px-8 mt-10">{{ $vuetify.lang.t("$vuetify.ETHPainPoints") }}</div> -->
      <div class="qrocde-bg py-8 ">
        <div class="qrocde-bg">
          <img src="@/assets/image/logo.webp">
          <div class="sub-title title-temp">{{ $vuetify.lang.t("$vuetify.titleLogo") }}</div>
        </div>
      </div>

      <v-container class="container box-bg p-6">
        <v-row justify="center" align="center">
          <v-col cols="4" class="pa-0">
            <div class="qrcode white rounded-lg overflow-hidden" v-if="$store.state.address">
              <img :src="qrcode" alt="" />
            </div>
          </v-col>
          <v-col cols="8" class="pa-0">
            <div class="rounded-lg ml-2 px-4">
              <div class="sub-tip mb-1 text-[#fff]">{{ $vuetify.lang.t("$vuetify.invite_scanCode") }}</div>
              <div class="url" v-clipboard:copy="url" v-clipboard:success="onClipboard">
                <div class="text mb-1">{{ url }}</div>
                <span class="right">
                  <v-icon>mdi-copy</v-icon>
                </span>
              </div>
              <div class="copy-button">
                <button class="primary-btn w-full" v-clipboard:copy="url" v-clipboard:success="onClipboard"
                  @click="onClickShowBetDialog(-1)">
                  {{ $vuetify.lang.t("$vuetify.copyLink") }}
                </button>
              </div>
            </div>
          </v-col>
        </v-row>

      </v-container>
      <div class="pa-4" />
    </div>
    <v-snackbar :value="loading" :timeout="-1" color="rgba(0, 0, 0, 0.8)" centered min-width="auto" max-width="70">
      <v-btn icon loading></v-btn>
    </v-snackbar>
    <v-snackbar v-model="snackbar" color="rgba(0, 0, 0, 0.8)" centered min-width="auto">
      {{ snackbarMsg }}
    </v-snackbar>
  </v-container>
</template>

<script>
import Xhr from "@/common/xhr";
import { useLoading } from "@/common/kit";
import QrCode from 'qrcode'
import vuetify from "@/vuetify";


export default {
  data: () => ({
    dialog: "RECHARGE",
    dialogLoading: false,
    loading: false,
    usdtInput: "",
    snackbar: false,
    snackbarMsg: "",
    qrcode: "",
    stat: {},
    user: {},
    agent: [{ value: 0 }, { value: 0 }, { value: 0 }],
    url: "",
    rechargeInput: null,
    showPagination: true,
    loadingMore: false,
    list: [],
    listForm: {
      page: 0,
      size: 50,
    },
    bonusRecords: [
      { dict: "5", diff: "5%", amount: "1000U", level: "金星", bonus: "10%", guess: "0" },
      { dict: "5", diff: "5%", amount: "3000U", level: "木星", bonus: "20%", guess: "0" },
      { dict: "5", diff: "5%", amount: "10000U", level: "水星", bonus: "30%", guess: "1%" },
      { dict: "5", diff: "5%", amount: "100000U", level: "火星", bonus: "40%", guess: "2%" },
      { dict: "5", diff: "5%", amount: "500000U", level: "土星", bonus: "50%", guess: "3%" },
    ],
    config: {
      title: vuetify.framework.lang.t("$vuetify.nav_promotion"),
      api: '/api/user/community',
      dataPath: 'data',
      listHeader: [
        { value: "level", handle: (value) => (value) },
        { value: "teamPerformance", handle: (value) => `${value}` },
        { value: "transactionFlow", handle: (value) => value },
        { value: "directReferral", handle: (value) => value },
      ],
    },
    tableData: [{
      level: "Lv1",
      teamPerformance: "10000U",
      transactionFlow: "3‰",
      directReferral: "3‰",
    }, {
      level: "Lv2",
      teamPerformance: "30000U",
      transactionFlow: "6‰",
      directReferral: "3‰",
    }, {
      level: "Lv3",
      teamPerformance: "50000U",
      transactionFlow: "9‰",
      directReferral: "3‰",
    }, {
      level: "Lv4",
      teamPerformance: "100000U",
      transactionFlow: "12‰",
      directReferral: "3‰",
    }, {
      level: "Lv5",
      teamPerformance: "150000U",
      transactionFlow: "15‰",
      directReferral: "3‰",
    }, {
      level: "Lv6",
      teamPerformance: "200000U",
      transactionFlow: "18‰",
      directReferral: "3‰",
    }, {
      level: "Lv7",
      teamPerformance: "300000U",
      transactionFlow: "21‰",
      directReferral: "3‰",
    }]
  }),
  computed: {
    getQrcodeUrl() {
      return this.url;
    },
    getCurrentPage() {
      return this.config
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.url = window.location.origin + "?code=" + this.$store.state.address;
      await this.getQrCode()
      useLoading("数据加载中...");
      await this.getUserInfo();
      console.log(this.$store.state.pa)
      useLoading();
    },
    async getQrCode() {
      const opts = {
        errorCorrectionLevel: 'L',
        type: 'image/png',
        quality: 0.3,
        margin: 2,
        width: 250,
        height: 250,
        color: {
          dark: '#000000',
          light: '#ffffff'
        }
      }
      QrCode.toDataURL(this.url, opts, (err, url) => {
        this.qrcode = url
      })
    },
    async getUserInfo() {
      const res = await Xhr.get("/api/user/info", {});

      const user = this.$get(res, "data.user", [])
      this.$set(this, 'user', user)

      if (this.user.is_agent == 1) {
        const agentRes = await Xhr.get("/api/user/agent", {});
        this.$set(this, "agent", this.$get(agentRes, "data", {}));
      }
    },
    onClipboard() {
      this.snackbar = true;
      this.snackbarMsg = vuetify.framework.lang.t("$vuetify.copy_tip");
    },

  },
};
</script>
<style lang="scss" scoped>
.qrcode-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  // background: url('~assets/image/qrcode_bg.jpeg') no-repeat center center;
  //   background-size: 100% 100%;
  //   height: calc(100vh - 142px);
  //   width: 100%;
  border-radius: 4px;
  //border: 3px solid var(--v-yellow-dark-lighten1);
  position: relative;
  // height: calc(100vh - 50px - 24px);

  .qrocde-bg {
    display: flex;
    width: 100%;
    gap: 10px;
    justify-content: center;
    align-items: center;

    img {
      width: 40px;
    }

    .title-temp {
      font-size: 30px;
    }
  }

  .q-title {
    font-size: 26px;
    color: #ffffff;
  }

  .qrcode {
    //padding: 20px;
    // background-color: #000;
    display: inline-block;
    width: 100%;

    >img {
      width: 100%;
      display: block;
    }
  }

  .sub-tip {
    color: #fff;
    font-size: 16px;
  }

  .url {
    border-radius: 25px;
    //width: 80%;
    line-height: 25px;
    position: relative;

    .text {
      color: #fff;
      font-size: 12px;
      line-height: 18px;
      //width: 85%;
      word-break: break-all;
      //padding-left: 15px;
      //white-space: nowrap;
      //text-overflow: ellipsis;
      //overflow: hidden;
    }

    .right {
      position: absolute;
      right: 0;
      top: 0;
      height: inherit;
      width: 15%;
      text-align: center;
      font-size: 20px;
    }
  }

  .copy-button {
    //width: 80%;
  }
}
</style>